<template>
  <div>
    <el-form ref="form" :model="formModel" :rules="rules">
      <template v-for="item in formItem">
        <el-form-item class="form-item"
                      :key="item.name"
                      :label="item.name"
                      :label-width="'120px' "
                      :size="'mini'"
                      :prop="item.prop">
          <el-input v-model="formModel[item.prop]" :size="'mini'"></el-input>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>

export default {
  props: {
    testformModel: {
      type: Object
    }
  },
  data() {
    return {
      formItem: [
        {name: 'Domain ID:', prop: 'domainId'},
        {name: 'Display Name:', prop: 'displayName'},
        {name: 'Email:', prop: 'email'},
        {name: 'Department:', prop: 'department'},
        {name: 'Country:', prop: 'country'},
        {name: 'Address:', prop: 'address'},
        {name: 'Fax:', prop: 'fax'},
        {name: 'First Name:', prop: 'firstName'},
        {name: 'Middle Name:', prop: 'middleName'},
        {name: 'Last Name:', prop: 'lastName'},
        {name: 'Gender:', prop: 'gender'},
        {name: 'Job Title:', prop: 'jobTitle'},
        {name: 'Location:', prop: 'location'},
        {name: 'Office:', prop: 'office'},
        {name: 'Office Code:', prop: 'officeCode'},
        {name: 'Phone:', prop: 'phone'},
        {name: 'Section1:', prop: 'section1'},
        {name: 'Section2:', prop: 'section2'}
      ],
      formModel: {},
      rules: {
        domainId: [
          {required: true, message: 'changeMainCategory'}
        ],
        displayName: [
          {required: true, message: 'changeMainCategory'}
        ],
        email: [
          {required: true, message: 'changeMainCategory'}
        ]
      }
    }
  },
  mounted() {
    // this.setFormModel(this.testformModel)
  },
  methods: {
    setFormModel(formModel) {
      this.formModel = formModel
      this.$nextTick(() => this.$refs['form'].clearValidate())
    },
    getFormModel() {
      return this.formModel
    },
    validateForm(fn) {
      return this.$refs['form'].validate()
    }
  }
}
</script>

<style scoped>
  .el-form-item--mini.el-form-item.form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
</style>
